<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>纽约出租车上车点热力图</title>
    <script type="text/javascript" include="bootstrap-css,jquery,papaparse" src="../js/include-web.js"></script>

    <style>
        #loading {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 800;
            margin-left: -130px;
            text-align: center;
            margin-top: -50px;
            width: 290px;
            padding: 10px;
            background: rgba(0, 0, 0, 0.5);
            color: whitesmoke;
            font-size: 16px;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<div id="loading">纽约出租车145万上车点数据加载中...</div>
<script type="text/javascript" include="leaflet.heat" src="../../dist/include-leaflet.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://support.supermap.com.cn:8090";
    var url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";

    var map = L.map('map', {
        maxZoom: 20,
        center: [40.68, -73.92],
        zoom: 12,
    });

    var attribution = '数据来源<a target="_blank" href="http://www.nyc.gov/html/tlc/html/about/trip_record_data.shtml">NYC Taxi(纽约出租车上车点)</a> Map Data <span>© <a href="http://support.supermap.com.cn/product/iServer.aspx" target="_blank">SuperMap iServer</a></span> with <span>© <a href="http://iclient.supermapol.com" target="_blank">SuperMap iClient</a></span>';
    L.supermap.tiledMapLayer(url, {attribution: attribution}).addTo(map);
    loadHeatMap();

    function loadHeatMap() {
        //145万个点
        var radius = 30, opacity = 0.5;
        var length = 0;//需要截取示例数据的长度,0表示全部
        $.get('../data/nyc-taxi.csv', function (csvstr) {
            var result = Papa.parse(csvstr, {skipEmptyLines: true, header: true});
            $("#loading").hide();

            var heatPoints = processData(result, length);
            resultLayer = L.heatLayer(heatPoints, {
                radius: radius,
                minOpacity: opacity
            }).addTo(map);
        });
    }

    function processData(result, length) {
        var data = result.data;
        var len = (length < 1 || length > data.lenth || length == null) ? data.length : length;
        data = data.slice(0, len);
        return data;
    }
</script>
</body>
</html>